<!--
 * @Author: DUST
 * @Date: 2023-11-27 13:44:40
 * @LastEditors: DUST
 * @LastEditTime: 2023-11-27 13:57:13
 * @FilePath: \business-card-system\admin\src\components\editPwd.vue
 * @Description: 
 * undefined
-->
<template>
  <ant-modal
    :visible="visible"
    :type="type"
    :loading="loading"
    :width="800"
    :title="title"
    @confirm="doConfirm"
    @cancel="cancel"
  >
    <a-form
      ref="formref"
      :model="formModel"
      class="ModalForm"
      :labelCol="{ span: 2 }"
      :wrapperCol="{ span: 20 }"
    >
      <a-form-item
        label="原密码"
        name="pwd"
        :rules="[{ required: true, message: '原密码不能为空' }]"
      >
        <a-input-password placeholder="请输入原密码" v-model:value="formModel.pwd" />
      </a-form-item>
      <a-form-item
        label="新密码"
        :rules="[{ required: true, message: '新密码不能为空' }]"
        name="pwd1"
      >
        <a-input-password placeholder="请输入新密码" v-model:value="formModel.pwd1" />
      </a-form-item>
      <a-form-item
        label="新密码"
        :rules="[{ required: true, message: '新密码不能为空' }]"
        name="pwd2"
      >
        <a-input-password placeholder="请再次输入新密码" v-model:value="formModel.pwd2" />
      </a-form-item>
    </a-form>
  </ant-modal>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import useForm from "@/utils/useForm";

const props = defineProps({
  width: {
    type: Number,
    default: () => 400,
  },
  visible: {
    type: Boolean,
    default: () => false,
  },
  loading: {
    type: Boolean,
    default: () => false,
  },
  type: {
    type: String,
    default: () => "",
  },
  data: {
    type: Object,
    default: () => ({}),
  },
});
const emit = defineEmits(["ok", "update:visible"]);

const title = ref<string>("修改密码");

const formObj = reactive({
  pwd: undefined,
  pwd1: undefined,
  pwd2: undefined
});

const { formref, formModel } = useForm(formObj);

const cancel = () => {
  emit("update:visible");
};
const doConfirm = () => {
  console.log("进入提交");
  formref.value.validate().then(() => {
    const obj = {
      ...formModel.value
    };
    console.log("要提交的数据：", obj);
    emit("ok", obj);
  });
};
</script>

